.bs-slider{
overflow: hidden;
max-height: 500px;
position: relative;
background: #000000;
}
.bs-slider:hover {
cursor: -moz-grab;
cursor: -webkit-grab;
}
.bs-slider:active {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
}
.bs-slider .bs-slider-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.0);
}
.bs-slider > .carousel-inner > .item > img,
.bs-slider > .carousel-inner > .item > a > img {
margin: auto;
width: 100% !important;
}
/********************
*****Slide effect
**********************/
/*---------- left right ----------*/
.control-round .carousel-control {
top: 47%;
opacity: 0;
width: 45px;
height: 45px;
z-index: 100;
color: #ffffff;
display: block;
font-size: 24px;
cursor: pointer;
overflow: hidden;
line-height: 43px;
text-shadow: none;
position: absolute;
font-weight: normal;
background: transparent;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.control-round:hover .carousel-control{
opacity: 1;
}
.control-round .carousel-control.left {
left: 1%;
}
.control-round .carousel-control.right {
right: 1%;
}
.control-round .carousel-control.left:hover,
.control-round .carousel-control.right:hover{
color: #fdfdfd;
background: rgba(0, 0, 0, 0.5);
border: 0px transparent;
}
.control-round .carousel-control.left>span:nth-child(1){
left: 45%;
}
.control-round .carousel-control.right>span:nth-child(1){
right: 45%;
}
/*---------- INDICATORS CONTROL ----------*/
.indicators-line > .carousel-indicators{
right: 47%;
bottom: 3%;
left: auto;
width: 90%;
height: 20px;
font-size: 0;
overflow-x: auto;
text-align: right;
overflow-y: hidden;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
white-space: nowrap;
}
.indicators-line > .carousel-indicators li{
padding: 0;
width: 15px;
height: 15px;
border: 1px solid rgb(158, 158, 158);
text-indent: 0;
overflow: hidden;
text-align: left;
position: relative;
letter-spacing: 1px;
background: rgb(158, 158, 158);
-webkit-font-smoothing: antialiased;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-right:15px;
-webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
z-index: 10;
cursor:pointer;
}
.indicators-line > .carousel-indicators li:last-child{
margin-right: 0px;
}
.indicators-line > .carousel-indicators .active{
margin: 1px 5px 1px 1px;
box-shadow: 0 0 0 2px #fff;
background-color: transparent;
position: relative;
-webkit-transition: box-shadow 0.3s ease;
-moz-transition: box-shadow 0.3s ease;
-o-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
margin-right:15px;
}
.indicators-line > .carousel-indicators .active:before{
transform: scale(0.5);
background-color: #fff;
content:"";
position: absolute;
left:-1px;
top:-1px;
width:15px;
height: 15px;
border-radius: 50%;
-webkit-transition: background-color 0.3s ease;
-moz-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
/********************
*****Slide animation
**********************/
@-webkit-keyframes scale{
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(1.1);transform:scale(1.1)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes scale{
0%{-webkit-transform:scale(1);transform:scale(1)}
50%{-webkit-transform:scale(1.1);transform:scale(1.1)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}
/*========== 缂╂斁 ==========*/
.fade {opacity: 1;}
.fade .item {
top: 0;
z-index: 1;
opacity: 0;
width: 100%;
position: absolute;
left: 0 !important;
display: block !important;
-webkit-transition: opacity ease-in-out 2s;
-moz-transition: opacity ease-in-out 2s;
-ms-transition: opacity ease-in-out 2s;
-o-transition: opacity ease-in-out 2s;
transition: opacity ease-in-out 2s;
}
.fade .item:first-child {top: auto;position: relative;}
.fade .item.active {
opacity: 1;
z-index: 2;
-webkit-transition: opacity ease-in-out 2s;
-moz-transition: opacity ease-in-out 2s;
-ms-transition: opacity ease-in-out 2s;
-o-transition: opacity ease-in-out 2s;
transition: opacity ease-in-out 2s;
}
.slide-image{-webkit-animation:scale 10s linear infinite;animation:scale 10s linear infinite;}
/*========== banner鍔ㄧ敾1 ==========*/
/*---------- SLIDE CAPTION ----------*/
.slide_style_left { text-align: left !important;}
.slide_style_right {text-align: right !important;}
.slide_style_center {text-align: center !important;}
.slide-text { left: 0; top: 40%; right: 0; padding: 0px 20px;width: 1300px; margin: 0px auto; position: absolute; text-align: left;
text-shadow: 1px 1px 1px #000;filter:shadow(Color=#000,Direction=10,Strength=10);}
/*.slide-text > h1 {
padding: 0;
color: #ffffff;
font-size: 70px;
font-style: normal;
line-height: 84px;
margin-bottom: 30px;
letter-spacing: 1px;
display: inline-block;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.slide-text .slide_p1{
padding: 0;
color: #ffffff;
font-size: 30px;
line-height: 30px;
font-weight: 300;
margin-bottom: 20px;
letter-spacing: 1px;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.slide-text .slide_p2{
padding: 0;
color: #ffffff;
font-size:36px;
line-height: 36px;
font-weight: 300;
margin-bottom: 20px;
letter-spacing: 1px;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.slide-text .slide_p3{
padding: 0;
color: #ffffff;
font-size: 20px;
line-height: 30px;
font-weight: 300;
margin-bottom: 20px;
letter-spacing: 1px;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}*/
.slide-text > p {
padding: 0;
color: #ffffff;
font-size: 20px;
line-height: 24px;
font-weight: 300;
margin-bottom: 40px;
letter-spacing: 1px;
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.slide-text > a.btn-default{
color: #ffffff;
background: #e62a4e;
font-weight: 400;
font-size: 13px;
line-height: 15px;
margin-right: 10px;
text-align: center;
padding: 17px 30px;
white-space: nowrap;
letter-spacing: 1px;
display: inline-block;
border: none;
text-transform: uppercase;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a.btn-primary{
color: #ffffff;
background: #e62a4e;
cursor: pointer;
font-weight: 400;
font-size: 13px;
line-height: 15px;
margin-left: 10px;
text-align: center;
padding: 17px 30px;
white-space: nowrap;
letter-spacing: 1px;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
border: none;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
.slide-text > a:hover,
.slide-text > a:active {
color: #ffffff;
background: #ba0379;
-webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}
.slide-text > h1 {
padding: 0;
color: #fad715;
font-size: 50px;
font-style: normal;
line-height: 50px;
margin-bottom: 30px;
letter-spacing: 1px;
display: inline-block;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.slide-text .slide_p1{
padding: 0 20px;
color: #fad715;
font-size: 50px;
line-height: 50px;
font-weight: 300;
margin-bottom: 0px;
letter-spacing: 1px;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
float: left;
}
.slide-text .slide_p2{
padding: 0 20px;
color: #fad715;
font-size:50px;
line-height: 50px;
font-weight: 300;
margin-bottom: 0px;
letter-spacing: 1px;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
float: left;
}
.slide-text .slide_p3{
padding: 0;
color: #fad715;
text-transform:uppercase;
font-size: 22px;
line-height: 30px;
font-weight: 300;
margin-bottom: 20px;
letter-spacing: 1px;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}
/*------------------------------------------------------*/
/* RESPONSIVE
/*------------------------------------------------------*/
@media (max-width: 1366px) {
.slide-text { left: 0; top: 30%; right: 0; padding: 0px 60px;width: 100%; max-width: 1300px; margin: 0px auto; position: absolute; text-align: left;}
.slide-text h1 {
font-size: 60px;
line-height: 50px;
margin-bottom: 20px;
}
.slide-text > p {
font-size: 18px;
}
}
@media (max-width: 991px) {
.slide-text h1 {
font-size: 40px;
line-height: 50px;
margin-bottom: 20px;
}
.slide-text > p {
font-size: 18px;
}
}
/*---------- MEDIA 480px ----------*/
@media (max-width: 768px) {
.slide-text {
padding: 10px 50px;
}
.slide-text h1 {
font-size: 30px;
line-height: 40px;
margin-bottom: 10px;
}
.slide-text > p {
font-size: 14px;
line-height: 20px;
margin-bottom: 20px;
}
.control-round .carousel-control{
display: none;
}
/*鎺у埗鍥剧墖鍔犲ぇ*/
.bs-slider > .carousel-inner > .item > img,
.bs-slider > .carousel-inner > .item > a > img {
margin: auto;
width: 200% !important;
height: 350px;
margin-left: -50%;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img{max-width: 1040px; }
}
@media (max-width: 480px) {
.slide-text {
left: 0;
top: 20%;
padding: 10px 10px;
}
.slide-text h1 {
font-size: 20px;
line-height: 25px;
margin-bottom: 5px;
}
.indicators-line > .carousel-indicators{
display: none;
}
.slide-text .slide_p1{
font-size: 16px;
line-height: 20px;
margin-bottom: 10px;
}
.slide-text .slide_p2{
font-size:14px;
line-height: 20px;
font-weight: 300;
margin-bottom: 10px;
}
.slide-text .slide_p3{
font-size: 14px;
line-height: 20px;
margin-bottom: 10px;
}
.slide-text > p {
padding: 0;
color: #ffffff;
font-size: 14px;
line-height: 20px;
font-weight: 300;
margin-bottom: 40px;
}
.slide-text > a.btn-default{
font-size: 12px;
line-height: 15px;
margin-right: 0px;
text-align: center;
padding: 10px 10px;
margin-bottom: 10px;
}
.slide-text > a.btn-primary{
font-size: 12px;
line-height: 15px;
margin-left: 0px;
text-align: center;
padding: 10px 10px;
}
}